<template>
  <div class="default-forum" >
      <!-- 发布帖子 -->
      <el-button @click="goPublic" type="warning">发布帖子</el-button>
      <hr>
          <ul>
            <li @click="goArticle(item.id)" class="default_forum_item" v-for="(item,index) in default_forum" :key="index">
              <div class="rank">{{ index + 1 }}</div>
              <div class="title">{{item.title}}</div>
              <div class="good">{{item.good}}点赞</div>
            </li>
          </ul>
  </div>
</template>
<script>
import publicForum from '@/views/front/center/publicblog/PublicBlog.vue'
import {getForumApi} from '@/api/forum'
export default {
  name: "myForum",
  components:{
    publicForum
  },
  data() {
    return {
      // 导航名字
      activeName: "first",
      // 默认排序内容
      default_forum: [
       
      ],
      dialogVisible: false
    };
  },
  mounted() {
    let data = {'page_size':5,'page_num':1}
    this.getForum(data)

  },
  methods: {
    // 去发布
    goPublic(){
      this.$router.push('/publicblog')
    },
    // 获取帖子
    async getForum(data){
      await getForumApi(data).then(res=>{
        this.default_forum = res.data.forum
      })
    },
    // 展示帖子
    goArticle(blog_id){
        this.$router.push({      
            path: `/dispalyarticle/${blog_id}`
          });
      },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
  computed: {}
};
</script>
  <style lang="less" scoped>
.default-forum {
    li:nth-child(1) > .rank {
      background-color: #fe2d46;
    }
    li:nth-child(2) > .rank {
      background-color: #ff6600;
    }
    li:nth-child(3) > .rank {
      background-color: #faa90e;
    }
//   background-color: var(--bgColor);
    // 默认排序开始
    .default_forum_item {
        width: 100%;
      font-size: 24px !important;
      display: flex;
      margin-top: 20px;
      .rank {
        height: 44px;
        width: 44px;
        background-color: var(--bgColor);
        text-align: center;
        line-height: 44px;
        color: var(--font_2);
        border-radius: 4px;
        margin-right: 20px;
      }
      .title {
        height: 44px;
        width: 80%;
        line-height: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .good {
        width: auto;
        height: 44px;
        line-height: 44px;
        color: var(--font_2);
      }
    
  
    }
    // 默认排序结束
    
}
    
</style>
  